import React, { Component } from 'react';
import { NavBar, Icon, SearchBar, List } from 'antd-mobile';
import axios from 'axios';
import { Link } from 'react-router-dom';
import './App.css';

const Item = List.Item;

class App extends Component {
  title = '15公里以内经销商';
  state = {
    data: [
      {
        distance: 14745.9927,
        wxDepartmentId: 10000184,
        name: '无锡德尔汽车有限公司'
      },
      {
        distance: 31378.4509,
        wxDepartmentId: 10000193,
        name: '镇江奥达汽车销售服务有限公司'
      },
      {
        distance: 43392.1075,
        wxDepartmentId: 10000187,
        name: '常州市凯歌汽车销售有限公司'
      }
    ]
  };
  render() {
    let { data } = this.state;
    data = data.map((d, i) => {
      return {
        ...d,
        distance_km: (d.distance / 1000).toFixed(2) + 'km'
      };
    });
    console.log('====================================');
    console.log('经销商信息', data);
    console.log('====================================');
    return (
      <div className="App">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.back()}
        >
          {this.title}
        </NavBar>
        <SearchBar
          placeholder="请输入地址"
          maxLength={8}
          onChange={this.handleSearch.bind(this)}
        />
        <List>
          {data.map((d, i) => (
            <Link to="/detail">
              <Item
                key={i}
                arrow="horizontal"
                extra={d.distance_km}
                onClick={() => {}}
              >
                {d.name}
              </Item>
            </Link>
          ))}
        </List>
      </div>
    );
  }

  handleSearch(val) {
    console.log('====================================');
    console.log('搜索条件', val);
    console.log('====================================');
    axios('https://haipengwandou.mynatapp.cc/shop/search', {
      params: { shopAddressKeyword: val }
    }).then(res => {
      console.log('====================================');
      console.log('搜索接口返回结果', res);
      console.log('====================================');
    });
  }

  componentDidMount() {
    document.title = this.title;
    // this.fetchData();
  }

  async fetchData() {
    let location = await this.getLocation();
    let userLongtitude = '113.406246';
    let userLatitude = '23.110533';
    if (location) {
      let { userLatitude, userLongtitude } = location;
      console.log('====================================');
      console.log('当前地理位置：', userLatitude, userLongtitude);
      console.log('====================================');
      axios
        .get('https://haipengwandou.mynatapp.cc/shop/recommend', {
          params: location
        })
        .then(res => {
          console.log('====================================');
          console.log('定位接口返回结果', res);
          console.log('====================================');
        });
    } else {
      axios('https://haipengwandou.mynatapp.cc/shop/recommend', {
        params: { userLongtitude, userLatitude }
      }).then(res => {
        console.log('====================================');
        console.log('打底定位接口返回结果', res);
        console.log('====================================');
      });
    }
  }

  async getLocation() {
    if (window.navigator.geolocation) {
      window.navigator.geolocation.getCurrentPosition(position => {
        return {
          userLatitude: position.coords.latitude,
          userLongtitude: position.coords.longitude
        };
      });
    } else {
      console.log('====================================');
      console.log('浏览器不支持地理定位。');
      console.log('====================================');
    }
  }
}

export default App;
